<template>
  <div class="shopro">
    <titletop :titlename="titlename" :fixedhead="fixedhead"></titletop>
    <div class="paddingtop">
      <div class="swiper-container">
          <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="item in navlist" v-text="item.name"></div>
          </div>
      </div>
    </div>
  </div> 
</template>

<script>
import Mock from 'mockjs'
import titletop from 'components/title'

export default {
  name: 'drugdetail',
  props : [],
  data () {
    return {
      titlename:'一笑堂店',
      fixedhead:'fixedhead',
      navlist:[]
    }
  },
  components: {
    titletop
  },
  methods : {
      getswipelist(){
          let data = Mock.mock({
              // 属性 list 的值是一个数组，其中含有 5 个元素
              'list|10': [{
                  // 属性 id 是一个自增数，起始值为 1，每次增 1
                  'name|+1': 1
              }]
          });
          this.navlist = data.list;
          setTimeout(()=>{
            var swiper = new Swiper('.swiper-container', {
              pagination: '.swiper-pagination',
              slidesPerView: 3,
              paginationClickable: false,
              spaceBetween: 0
            });
          },10);
      }
  },
  mounted(){
      this.getswipelist();
  }
}

</script>

<style lang="scss" scoped>
  .swiper-container {
      width: 100%;
      height: 3rem;
  }
  .swiper-slide {
      text-align: center;
      background: red;
      box-sizing:border-box;
      border:1px solid #fff;
      /* Center slide text vertically */
      display: flex;
      -webkit-box-pack: center;
      justify-content: center;
      align-items: center;
  }
</style>
